/* Structure
    .container
        main
            site-container



*/




@media screen and (min-width: 1100px){
    /* #################    Main CSS Layout    ####################*/
    .container {
        /* Size */
        width: 100%;

        /* Position */
        position: absolute;
        z-index: 1;

        /* Grid */
        display: grid;

        grid-template-columns: 1fr minmax(800px, 960px) 1fr;
        grid-template-rows: 4.75em auto auto;

        grid-row-gap: 2em;
        padding-top: 2em;

        grid-template-areas:    ".      nav         ."
                                ".      main        ."
                                ".      footer      .";
    }

        /* #################    Main   ####################*/
        main {
            max-height: 100%;
            grid-area: main;

            padding-top: 1rem;
            padding-bottom: 1rem;
        }

        .site-container {
            /* Size */
            width: 100%;
            height: 100%;

            /* Position */

            /* Grid */
            display: grid;
            grid-row-gap: 2rem;

            grid-template-columns: 1fr 8fr 1fr;
            grid-template-rows: 1fr auto;

            grid-template-areas:    ".      header         ."
                                    ".      content        ."
        ;
            justify-items: center;
            align-items: center;
        }

        .content-container {
            grid-area: content;

             /* Size */
             width: 100%;
             height: 100%;
 
             /* Position */
 
             /* Grid */
             display: grid;
             grid-row-gap: 2rem;
 
             grid-template-columns: auto;
             grid-template-rows: auto;
 
             grid-template-areas:  "content"
            ;
            justify-items: center;
            align-items: center;
        }

        /* NAV */
        nav {
             /* Size */
             width: auto;
            
             /* Position */
             position: fixed;
             top: 0;
             left: 0;
             z-index: 2;
 
             /* Grid */
             display: grid;
 
             grid-template-columns: 1fr;
             grid-template-rows: 1fr;
             grid-template-areas: "button";
         
             /* Grid Items */
             align-items: start;
             justify-items: start;       

             padding: 2rem;


        }

        #options-nav{
            align-items: end;
            justify-items: end;  

            right: 0;
            left: auto;

            gap: 1.5rem;
            
        }

        #options-nav-img {
            height: 5rem;
            width: 5rem;
            padding: .5rem;
            cursor: pointer;
        }

        #options-nav-a img{
            transition: transform .9s ease-in-out;

        }

        #options-nav-a:hover img{
            transform: scale(1.3) rotate(360deg);
        }

        #logout-nav {
            height: 80px;
            width: 80px;
            border-radius: 8rem;
            transition: transform .9s ease-in-out;
        }

        #logout-img {
            height: 5rem;
            width: 5rem;
            padding: .8rem;
            cursor: pointer;
            transition: transform .9s ease-in-out;
        }

        #logout-nav:hover {
            transform: scale(1.3);
        }



        nav img {
            height: 5rem;
            width: 5rem;

            grid-area: button;

        }

        nav .glass{
            border-radius: 6rem;

        }

        .page-header {
            grid-area: header;
            text-align: center;
        }

        /* #################   Footer    ####################*/
        footer {
            grid-area: footer;
           
        }

            /* Footer ul */
            footer ul {
                
                /* Properties */
                margin: 0;
                display: flex;
                list-style-type: none;
                justify-content: center;
                padding: 0;

               
            }

                /* Footer Items */
                footer a {
                    /* Properties */
                    margin-top: auto;
                    margin-bottom: 0;
                    padding: 0 .5em 0 .5em;

                    /* Animation */
                    transition: color ease-in-out 250ms;
                }

                footer a:hover {
                    /* Properties */
                    color: var(--col4);
                }



}